<template>
  <aside
    :class="['aui-sidebar', `aui-sidebar--${$store.state.sidebarLayoutSkin}` ,{'menu-fold':$store.state.sidebarFoldType==2}]">
    <div class="aui-sidebar__name" v-if="$store.state.curModule && !$store.state.sidebarFold">
      <span>{{$store.state.curModule.name}}</span>
    </div>
    <div class="aui-sidebar__inner">
      <el-menu :default-active="$store.state.sidebarMenuActiveName" :collapse="$store.state.sidebarFold"
        :unique-opened="true" :collapseTransition="false" class="aui-sidebar__menu" size="small">
        <sub-menu v-for="menu in sidebarMenuList" :key="menu.id" :menu="menu" size="small" />
      </el-menu>
    </div>
    <div v-if="$store.state.sidebarFoldType==2" style="margin:10px 0px 10px 25px"
      @click="$store.state.sidebarFold = !$store.state.sidebarFold">
      <div class="bg"></div>
      <div class="img">
        <img v-if="!$store.state.sidebarFold" src="~@/assets/img/sidebar-left.png" style="width:11px;height:12px;" />
        <img v-if="$store.state.sidebarFold" src="~@/assets/img/sidebar-right.png" style="width:11px;height:12px;" />
      </div>
    </div>
  </aside>
</template>
<style scoped>
/* .el-submenu__title {
  font-size: 13px;
} */
</style>
<script>
import SubMenu from './main-sidebar-sub-menu'
import { isEmpty } from '@/utils/validate'
export default {
  data () {
    return {
    }
  },
  props: {
    curModule: {
      type: Object,
      required: true
    }
  },
  components: {
    SubMenu
  },
  computed: {
    sidebarMenuList: function () {
      return isEmpty(this.curModule) ? window.SITE_CONFIG['menuList'] : this.curModule.children
    },
    routeMeta () {
      return this.$route.meta || {}
    }
  },
  created () {
    this.$store.state.sidebarMenuList = window.SITE_CONFIG['menuList']
  },
  mounted () {
    // console.log('1', this.routeMeta.v2Flag, this.$store.state.curModule, this.$store.state.sidebarFold)
  }
}
</script>
